<template>
  <div class="wrap">
    <h2>收费记录</h2>
    <div class="container">
      <div class="top box">
        <div class="details">
          <div class="det det-left">
            <li>车牌号</li>
            <li>有效期</li>
            <li>停车时长</li>
            <li>入场时间</li>
            <li>入口</li>
          </div>
          <div class="det">
            <li>京A66666</li>
            <li>三个月</li>
            <li>7分钟29秒</li>
            <li>2020/07/08 &nbsp;14:23</li>
            <li>A入口</li>
          </div>
        </div>
      </div>
      <div class="top box">
        <div class="details">
          <div class="det det-left">
            <li>车牌号</li>
            <li>有效期</li>
            <li>停车时长</li>
            <li>入场时间</li>
            <li>入口</li>
          </div>
          <div class="det">
            <li>京A66666</li>
            <li>三个月</li>
            <li>7分钟29秒</li>
            <li>2020/07/08 &nbsp;14:23</li>
            <li>A入口</li>
          </div>
        </div>
      </div>
      <div class="top box">
        <div class="details">
          <div class="det det-left">
            <li>车牌号</li>
            <li>有效期</li>
            <li>停车时长</li>
            <li>入场时间</li>
            <li>入口</li>
          </div>
          <div class="det">
            <li>京A66666</li>
            <li>三个月</li>
            <li>7分钟29秒</li>
            <li>2020/07/08 &nbsp;14:23</li>
            <li>A入口</li>
          </div>
        </div>
      </div>
      <div class="bottom box">
        <img :src="imgs" alt="" />
      </div>
      <div class="bottom box">
        <img :src="imgs" alt="" />
      </div>
      <div class="bottom box">
        <img :src="imgs" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import imgs from '../../assets/images/photo_03.png'
export default {
  data() {
    return {
      imgs: imgs,
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 100%;
  min-width: 900px;
  box-shadow: 0 3px 10px 2px #bbb8ca;
  h2 {
    font-size: 18px;
    line-height: 36px;
    text-align: left;
    margin-left: 8px;
  }
  .container {
    width: 100%;
    height: 95.5%;
    overflow: auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .box {
      width: 27.8%;
      height: 28%;
      min-width: 140px;
      min-height: 140px;
      box-sizing: border-box;
    }
    .top {
      height: 24.86%;
    //   min-height: 140px;
      margin-top: 2%;
      border: 2px solid #c5c5c5;
    }
    .details {
      height: 100%;
      color: #3f3f3f;
      list-style: none;
      box-sizing: border-box;
      text-align: left;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      align-content: flex-start;
      .det {
        height: 98%;
        line-height: 32px;
        padding-top: 5px;
        padding-left: 20px;
        li{
            height: 20%;
        }
      }
      .det-left {
        width: 90px;
        background: #c5c5c5;
      }
    }
    .bottom {
      height: 29.4%;
      width: 27.8%;
    //   margin-top: 14.4%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>